<!-- 企业信息审核 -->
<template>
  <div>
    <Modal v-model="modalValue" width="1200" title="变更历史记录" :mask-closable="false" footer-hide @on-cancel="onCancel">
      <Table :columns="columns" :data="listData" height="500">
        <template slot-scope="{ row }" slot="changeBefore">
          <span style="white-space: pre-wrap;">{{ row.changeBefore }}</span>
        </template>
        <template slot-scope="{ row }" slot="changeAfter">
          <span style="white-space: pre-wrap;">{{ row.changeAfter }}</span>
        </template>
      </Table>
      <PageAtion
        v-if="formData.total"
        :total="formData.total"
        :size.sync="formData.size"
        :page.sync="formData.page"
        @pageSizeChange="pageSizeChange"
      />
    </Modal>
  </div>
</template>

<script>
import { busiInfoGetChangePage } from '@/api/businessInformationManage.js'
import { GetCompanyChangeHistory } from '@/api/enterpriseInforManage.js'

export default {
  name: 'historyChange',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 经营信息使用busiInfoId, 企业信息使用companyId
    busiInfoId: {
      type: String,
      default: ''
    },
    companyId: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      handler (val) {
        this.modalValue = val
        if (val) {
          this.init()
        }
      }
    }
  },
  data () {
    return {
      modalValue: false,
      listData: [],
      formData: {
        page: 1,
        size: 10,
        total: 0,
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          title: '变更时间',
          key: 'changeTime',
          width: 170,
        },
        {
          title: '变更类型',
          key: 'changeWayName',
          width: 120,
        },
        {
          title: '变更项目',
          key: 'changeContent',
          width: 160,
        },
        {
          title: '变更前',
          key: 'changeBefore',
          slot: 'changeBefore',
        },
        {
          title: '变更后',
          key: 'changeAfter',
          slot: 'changeAfter',
        },
      ],
    }
  },
  methods: {
    // 初始化数据
    async init () {
      const request = {
        ...this.formData
      }
      // 经营信息历史记录
      if (this.busiInfoId) {
        request.busiInfoId = this.busiInfoId
        var { data, page, size, total } = await busiInfoGetChangePage(request)
      }
      // 企业信息历史记录
      if (this.companyId) {
        request.companyId = this.companyId
        var { data, page, size, total } = await GetCompanyChangeHistory(request)
      }
      this.listData = data
      this.formData = { ...this.formData, ...{ page, size, total } }
    },
    pageSizeChange () {
      this.init()
    },
    onCancel () {
      this.$emit('input', false)
    },
  }
};
</script>

<style lang="less" scoped>
</style>
